<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>角色管理 - 权限事务缓存系统</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            background-color: #f8f9fa;
        }
        .card {
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        .table th, .table td {
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
            <a class="navbar-brand" href="/permission-system">权限事务缓存系统</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="/permission-system">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/permission-system/users">用户管理</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="/permission-system/roles">角色管理</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/permission-system/permissions">权限管理</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- 主要内容 -->
    <div class="container my-5">
        <div class="card">
            <div class="card-header bg-primary text-white">
                <h4 class="mb-0">
                    <i class="fas fa-user-tag mr-2"></i>角色管理
                </h4>
            </div>
            <div class="card-body">
                <!-- 错误提示区域 -->
                <div id="roleError" class="alert alert-warning alert-dismissible fade" role="alert" style="display: none;">
                    <strong>提示：</strong>
                    <span></span>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>

                <!-- 角色列表表格 -->
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr class="bg-light">
                                <th scope="col">角色ID</th>
                                <th scope="col">角色名称</th>
                                <th scope="col">描述</th>
                            </tr>
                        </thead>
                        <tbody id="roleTableBody">
                            <!-- 角色数据将通过JavaScript动态加载 -->
                            <tr>
                                <td colspan="3" class="text-center">
                                    <div class="spinner-border" role="status">
                                        <span class="visually-hidden">加载中...</span>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/js/bootstrap.bundle.min.js"></script>
    <script>
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            loadRoles();
        });

        // 加载角色列表
        function loadRoles() {
            fetch('/permission-system/api/roles')
                .then(response => response.json())
                .then(data => {
                    console.log('角色API返回的原始数据:', data);
                    console.log('data.code:', data.code);
                    console.log('data.data:', data.data);
                    
                    // 检查数据格式 - 后端返回格式为 {code: 200, message: "success", data: [...]}
                    if (data.code === 200 && data.data) {
                        renderRoleTable(data.data);
                    } else {
                        console.log('角色数据格式不匹配:', data);
                        showToast('加载角色列表失败: ' + (data.message || '数据格式错误'), 'error');
                    }
                })
                .catch(error => {
                    console.error('加载角色失败:', error);
                    showToast('加载角色列表失败，请重试', 'error');
                });
        }

        // 渲染角色表格
        function renderRoleTable(roles) {
            const tableBody = document.getElementById('roleTableBody');
            tableBody.innerHTML = '';
            
            if (roles && roles.length > 0) {
                roles.forEach(role => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td>${role.id}</td>
                        <td>${role.name}</td>
                        <td>${role.description || '-'}</td>
                    `;
                    tableBody.appendChild(row);
                });
            } else {
                tableBody.innerHTML = `
                    <tr>
                        <td colspan="3" class="text-center">暂无角色数据</td>
                    </tr>
                `;
            }
        }

        // 显示提示框
        function showToast(message, type = 'info') {
            const errorDiv = document.getElementById('roleError');
            const errorSpan = errorDiv.querySelector('span');
            
            errorSpan.textContent = message;
            
            // 设置样式
            errorDiv.className = 'alert alert-dismissible fade show';
            
            if (type === 'error') {
                errorDiv.classList.add('alert-danger');
            } else if (type === 'success') {
                errorDiv.classList.add('alert-success');
            } else {
                errorDiv.classList.add('alert-info');
            }
            
            errorDiv.style.display = 'block';
            
            // 3秒后自动隐藏
            setTimeout(() => {
                errorDiv.classList.remove('show');
                errorDiv.style.display = 'none';
            }, 3000);
        }
    </script>
</body>
</html>